<template>
    <div class="root">
        <template v-if="!$route.meta.affix">
            <left-menu class="left-menu" />
            <div class="main" :class="{'main-full': sideFull, 'main-mini': !sideFull}">
                <page-head />
                <my-tab />
                <keep-alive :include="activeCompName" :max="8">
                    <router-view class="content" />
                </keep-alive>
            </div>
        </template>
        <template v-else>
            <router-view />
        </template>
    </div>
</template>

<script>
import PageHead from '@/views/layout/pageHead';
import LeftMenu from '@/views/layout/leftMenu';
import { mapState, mapActions } from 'vuex';

export default {
    name: 'app',

    components: {
        PageHead,
        LeftMenu
    },

    computed: {
        ...mapState('mytab', ['mytab']),
        ...mapState('layout', ['sideFull']),

        activeCompName() {
            const result = this.mytab.map(item => {
                return item.compName;
            });

            result.push('Home');

            return result;
        }
    },

    mounted() {
        const tabs = JSON.parse(this.$localStore.get('myTab'));

        if (tabs) {
            this.update_mytab(tabs);
        }
    },

    methods: {
        ...mapActions('mytab', ['update_mytab'])
    }
};
</script>

<style lang="scss" scoped>
.main-full {
    width: calc(100vw - 165px);
}
.main-mini {
    width: calc(100vw - 46px);
}
.root {
    display: flex;
    .left-menu {
        height: 100vh;
    }
    .main {
        .content {
            position: relative;
            padding: 10px 10px 5px 20px;
            overflow: hidden;
            height: calc(100vh - 71px);
            width: 100%;
        }
    }
}
</style> 